<template>
  <div>
    这里还什么都没写
    <el-input v-model="show"></el-input>
    <div v-if="show === '1'">出来了1</div>
    <div v-else-if="show === '2'">出来了2</div>
    <div v-else>出来了3</div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item.label }}</li>
    </ul>
    <!-- <input v-model="input" @keydown="showInfo"></input> -->
    <el-input v-model="input" @keydown.native="showInfo"></el-input>
    <el-input v-model="userName"></el-input>
    <el-input v-model="obj.name"></el-input>
    <el-input v-model="first"></el-input>
    <el-input v-model="last"></el-input>
    <span>{{ all }}</span>
  </div>
</template>

<script>
export default {
  name: "test",
  // 组件内钩子
  beforeRouteEnter(to, from, next) {
    // console.log('home before enter')
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 4.2
    console.log("home update enter");
    next();
  },
  beforeRouteLeave(to, from, next) {
    // console.log('home leave enter')
    next();
  },
  watch: {
    userName(newName, oldName) {
      console.log(newName, oldName);
    },
    "obj.name"(newName, oldName) {
      // console.log(newName,oldName);
    },
    obj: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
        console.log("numbers正在被侦听");
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    all: function () {
      return Number(this.first) + Number(this.last);
    },
  },
  data() {
    return {
      first: 1,
      last: 2,
      obj: {
        name: "张三",
      },
      userName: "张三",
      input: "",
      show: "1",
      msg: "Welcome to Your Vue.js Home",
      msg1: "欢迎Dylan",
      isCollapse: false,
      list: [
        {
          value: Math.floor(Math.random() * 1000),
          label: "第一个",
        },
        {
          value: Math.floor(Math.random() * 1000),
          label: "第二个",
        },
        {
          value: Math.floor(Math.random() * 1000),
          label: "第三个",
        },
      ],
    };
  },
  beforeCreate() {
    console.log(1);
  },
  created() {
    console.log(2);
  },
  beforeMount() {
    console.log(3);
  },
  mounted() {
    console.log(4);
  },
  // beforeUpdate(){
  //   console.log(5);
  // },
  // updated(){
  //   console.log(6);
  // },
  // beforeDestroy(){
  //   console.log(7);
  // },
  // destroyed(){
  //   console.log(8);
  // },
  methods: {
    showInfo(e) {
      console.log(this.input, e);
    },
  },
};
</script>

<style>
/* li {

} */
</style>